<template>
  <div>
    <div class="session-content">
      <h3>客户关注点</h3>
      <div v-if="isLoading" class="flex flex-row">
        AI正在全力生成中
        <van-loading type="spinner" class="ml-2" />
      </div>
      <div v-else-if="isEmpty">
        <div class="h-[120px] flex justify-center items-center">
          <p>暂无内容</p>
        </div>
        <!-- <van-empty description="暂无内容" /> -->
      </div>

      <div v-ai-tip="'bottom-right'" v-else>
        <markdown :content="analysis" />
        <h3 class="mt-4">建议对策</h3>
        <ul class="text-[14px]" v-for="item of suggestions" :key="item">
          {{
            item
          }}
        </ul>
      </div>
    </div>

    <div class="session-content">
      <h3>明细</h3>
      <template v-for="item of info.meets || []" :key="item">
        <div
          class="flex flex-col justify-center bg-[#ffffff] p-4 mb-4 rounded-lg cursor-pointer"
          @click="onClickRecord(item)"
        >
          <div class="flex flex-row justify-between items-center mb-2">
            <div class="flex flex-row">
              <img class="mr-2" src="@/icons/svg/customer/meeting_logo.svg" alt="logo" />
              <h4>{{ item.subject }}</h4>
            </div>
            <van-icon name="arrow" color="#8C8C8C" />
          </div>
          <div class="text-[#8C8C8C] text-xs">
            {{ item.startTime.slice(0, 16) }} ·
            {{ secondsToDuration(item.recordDurationSeconds) }} · 提及{{
              item.mentionCount
            }}次
          </div>
        </div>
      </template>
    </div>

    <div></div>
  </div>
</template>

<script setup>
import { defineProps, computed, onMounted } from "vue";
import { secondsToDuration } from "@/utils/timeTool";
import markdown from "@/components/markdown.vue";
import { useCustomerStore } from "@/store";
import { openUrl, openMeetingRecord } from "@/utils/urlTool";

// const store = useCustomerStore();
const props = defineProps({
  info: {
    type: Object,
    default: () => {
      return {};
    },
  },
});

function onClickRecord(item) {
  openMeetingRecord(item.id);
}

const isLoading = computed(() => {
  return !(analysis.value?.length > 0) && !isEmpty.value;
});

const isEmpty = computed(() => {
  return props.info.isEmpty;
});

const suggestions = computed(() => {
  return props.info.analysis?.应对策略建议 || [];
});

const analysis = computed(() => {
  return props.info.analysis?.竞争对手分析 || "";
});
</script>

<style lang="less" scoped>
.session-content {
  display: flex;
  flex-direction: column;
  background-color: #f9fafc;
  border-radius: 8px;
  padding: 20px 15px;
  margin-bottom: 15px;

  h3 {
    color: #262626;
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 16px;
  }

  p {
    font-weight: 400;
    font-size: 14px;
    color: #262626;
    line-height: 24px;
    margin-bottom: 16px;
  }

  ul {
    margin-bottom: 8px;
  }
}
</style>
